Building complex paths

Looking at the animation you built in the last step, it does create a smooth curve - but the shape could be more "moon like."

In this step, you will modify the transition to round out the motion of the moon to create a more "moon like" arc.

Modifying a path with multiple KeyPosition elements

MotionLayout can modify a path further by defining as many KeyPosition as needed to get any motion. For this animation you will build an arc, but you could make the moon jump up and down in the middle of the screen if you wanted.

1. Open xml/step4.xml. You see it has the same views and the KeyFrame you added in the last step.
2. To round out the top of the curve, add two more KeyPositions to the path of @id/moon, one just before it reaches the top and one after.

<!-- xml/step4.xml -->
<!-- TODO: Add two more KeyPositions to the KeyFrameSet here -->
<KeyPosition
       app:framePosition="25"
       app:motionTarget="@id/moon"
       app:keyPositionType="parentRelative"
       app:percentY="0.6"
/>
<KeyPosition
       app:framePosition="75"
       app:motionTarget="@id/moon"
       app:keyPositionType="parentRelative"
       app:percentY="0.6"
/>

These KeyPositions will be applied 25% and 75% of the way through the animation, and cause @id/moon to move through a path that is 60% from the top of the screen. Combined with the existing KeyPosition at 50%, this creates a smooth arc for the moon to follow.

In MotionLayout, you can add as many KeyPositions as you would need to get the motion path you want. MotionLayout will apply each KeyPosition at the specified framePosition, and figure out how to create a smooth motion that goes through all of the KeyPositions.

**A KeyPosition always defines an (x, y, width, height) position that the View must move through during the transition from start to end. **

If you don't specify one dimension, it will have a default value (zero, or an appropriate value based on the framePosition). In this example, by specifying only percentY, the percentX keeps its default value for that keyPosition.

Run the animation

1. Run the app again. Go to Step 4 to see the animation in action. When you click on the moon, it follows the path from start to end – going through each KeyPosition that was specified in the KeyFrameSet.

Modifying a path with several KeyPositon tags allows you to build complex motion.

You can build arcs, configure sharp corners, make views bounce around, or hop from start to end. Since MotionLayout lets you apply several KeyPositions to the same path, you can modify the path a view takes from start to end dramatically.

Explore on your own

1. Before you move on to other types of KeyFrames, try adding some more KeyPositions to the KeyFrameSet to see what kind of effects you can create just using KeyPosition. Here's one example showing how to build a complex path that moves back and forth during the animation.

<!-- Complex paths example: Dancing moon -->
<KeyFrameSet>
   <KeyPosition
           app:framePosition="25"
           app:motionTarget="@id/moon"
           app:keyPositionType="parentRelative"
           app:percentY="0.6"
           app:percentX="0.1"
   />
   <KeyPosition
           app:framePosition="50"
           app:motionTarget="@id/moon"
           app:keyPositionType="parentRelative"
           app:percentY="0.5"
           app:percentX="0.3"
   />
   <KeyPosition
           app:framePosition="75"
           app:motionTarget="@id/moon"
           app:keyPositionType="parentRelative"
           app:percentY="0.6"
           app:percentX="0.1"
   />
</KeyFrameSet>

Once your done exploring KeyPosition, in the next step you'll move on to other types of KeyFrames.